<template>
  <!-- 面包屑 -->
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>报销补帖</el-breadcrumb-item>
      <el-breadcrumb-item>招待费月汇总</el-breadcrumb-item>
      <el-breadcrumb-item><b>招待费月汇总</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 搜索框 -->
  <div style="margin:40px 20px 20px 20px">
    <el-form :inline="true" ref="searchFormRef" :model="searchFormModel" class="demo-form-inline" style="margin-top: 20px">
      <el-form-item prop="month" label="月份">
        <el-date-picker clearable
                        v-model="searchFormModel.month"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结算状态" prop="state">
        <el-select v-model="searchFormModel.is_settlement" placeholder="请选择结算状态" clearable style="width: 150px">
          <el-option
              v-for="item in stateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="searchOnSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <!--  数据表格-->
  <div style="margin:20px">
    <el-table :data="blogInfo" stripe border style="width: 100%">
      <el-table-column label="招待费月费用" align="center" prop="entertain_money" />
      <el-table-column label="月份" align="center" prop="month" width="180"/>
      <el-table-column label="结算人员" align="center" prop="settlement_people" />
      <el-table-column label="结算状态" align="center" prop="is_settlement">
        <template #default="scope">
          <span v-if="scope.row.is_settlement===0"><el-tag type="danger">未结算</el-tag></span>
          <span v-if="scope.row.is_settlement===1"><el-tag type="success">已结算</el-tag></span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template #default="scope">
          <el-button
              size="small"
              type="danger"
              :disabled="scope.row.is_settlement === 1"
              @click="tableCheckHandler(scope.$index, scope.row)">
            <el-icon><Coin /></el-icon>结算
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!--  分页-->
  <div class="page">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3,5]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>

<!--结算  -->
  <el-dialog v-model="dialogCheckState" title="提示" width="500" >
    <div style="">
      <label>是否结算该条款？</label>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogCheckOnReset">取消</el-button>
        <el-button type="primary"  @click="dialogCheckOnSubmit(formCheck.id)" >确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {ArrowRight} from "@element-plus/icons-vue";
import {Delete, Edit, Plus , DocumentChecked, Coin } from "@element-plus/icons";
import {onMounted, reactive, ref} from "vue";
import request from "@/utils/reimburse";
import {ElMessage, ElMessageBox, UploadProps, UploadUserFile} from "element-plus";
import axios from "axios";

const  mallInfo=ref([])
onMounted(()=>{
  getEntertainApply();
})

//分页
const currentPage = ref(1)
const pageSize = ref(3)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let totals=ref(0);

const  blogInfo=ref([])
const formatDate=(value)=> {
  if (!value) {
    // 如果日期时间选择器的值为空，则不进行格式化
    searchFormModel.month = '';
    return;
  }
  // 将日期时间字符串转换为Date对象
  const date = new Date(value);
  // 获取年、月、日、小时、分钟和秒
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');

  // 组合成所需的格式
  searchFormModel.month = `${year}-${month}-${day}`;
}

// 表格显示内容
const getEntertainApply = () => {
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    // 初始时不包含ID参数
  };
  // 如果日期不为空，则添加到查询参数中
  if (searchFormModel.month && searchFormModel.month.trim() !== '') {
    params.month = searchFormModel.month.trim();
  }
  // 如果审批状态不为空，则添加到查询参数中
  if (searchFormModel.is_settlement && searchFormModel.is_settlement.trim() !== '') {
    params.is_settlement = searchFormModel.is_settlement.trim();
  }
  request({
    url: '/entertainApply/entertainApplyList',
    method: 'get',
    params,
  }).then((req) => {
    console.log(req)
    if (200 == req.data.errorCode) {
      blogInfo.value = req.data.data.records.map(item => ({
        ...item,
      }));
      totals.value = req.data.data.total;
    }
  })
}
const handleCurrentChange = (page) => {
  currentPage.value = page
  getEntertainApply()
}
const handleSizeChange = (size) => {
  pageSize.value = size
  getEntertainApply()
}

//搜索
const searchFormRef=ref()
const searchFormModel=reactive({
  id:'',
  entertain_money:'',
  month:'',
  settlement_people:'',
  is_settlement:''
})

// 定义下拉框选项


const stateOptions = ref([
  {value: '', label: '全部'},
  { value: '0', label: '未结算' },
  { value: '1', label: '已结算' },
]);


const searchOnSubmit=()=>{
  getEntertainApply()
}

/*结算*/
const formCheckRef = ref()
const dialogCheckState = ref(false)

// 新增表单初始化数据
const formCheckData = {
  id:'',
  state:''
}
const tableCheckHandler = (rowIndex , rowData) => {
  console.log("-------------")
  console.log(rowIndex)
  console.log(rowData)

  formCheck.id = rowData.id
  formCheck.is_settlement = rowData.is_settlement


  dialogCheckState.value = true
}
const dialogCheckOnReset = () => {
  formEdit.is_settlement=''
  // 关闭对话框
  dialogCheckState.value=false;
}
const dialogCheckOnSubmit = (id) => {
  // 数据提交到服务器
  // 服务器端返回成功 ：清空表单，关闭对话框，更新表格内容
  request({
    method:'PUT',
    url:`/entertainApply/updateS?id=${id}`,
    data:JSON.stringify({...formCheck,id}),
    headers: {'content-type': 'application/json;charset=UTF-8'}
  }).then(req=>{
    ElMessage({
      type:'success',
      message:req.data.msg
    })
    if (200==req.data.errorCode){
      getEntertainApply()
    }
  })
  dialogCheckState.value = false
}

const formCheck = reactive({...formCheckData})
</script>

<style scoped>
.el-breadcrumb{
  font-size: 18px;
  margin: 20px;
}
</style>